<template>
	<view class="content">
		<view class="main">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="demo_tops">
			<view class="demo_top_bt">
				<image src="/static/感叹号.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
				<p style="line-height: 100rpx;font-size: 50rpx;">已取消</p>
			</view>
			<p style="text-align: center;">取消原因：超时未支付</p>
		</view>
		
		<view class="demo_centertwo">
			<view class="demo_centertwo_bt">
				<image style="width: 50rpx;height: 50rpx;margin-top: 10rpx;margin-left: 20rpx;" src="/static/商店.png" mode=""></image><p style="line-height: 70rpx;">  官方严选商城</p>
				<image src="/static/前进.png" style="width: 40rpx;height: 40rpx;margin-top: 18rpx;margin-left: 10rpx;" mode=""></image>
			</view>
			<view class="demo_centertwo_db">
				<view class="de_left">
					<image style="width: 100%;height: 95%;" :src="image+datas.images[1]" mode=""></image>
				</view>
				<view class="de_right">
					<p style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 35rpx;margin-left: 10rpx;">{{datas.name}}</p>
				<p class="psd">套餐 ：{{meal.name}}</p>
				<p class="psd">租期 ：{{info.buy_out.date}}</p>
				<p class="psd">数量 ：1</p>
				</view>
			</view>
		
		</view>
		<view class="demo_centerthree">
			<view class="demo_centertwo_bts" style="border-bottom: 1px solid #E9E9E9;">
			<p style="line-height: 70rpx;font-size: 40rpx;font-weight: bold;">  首期首付金额</p>
			<p style="position: absolute;right: 0;line-height: 70rpx;font-size: 40rpx;font-weight: bold;">￥{{info.buy_out.price}}</p>
			</view>
			<view class="three_btm">
				<view class="btm_zuo">
					<p style="line-height: 45rpx;">剩余租期</p>
					<p style="line-height: 45rpx;">总租金</p>
					<p style="line-height: 45rpx;">配送方式</p>
					<p style="line-height: 45rpx;">到期买断尾款</p>
				</view>
				<view class="btm_you">
					<p style="line-height: 45rpx;text-align: right;">￥{{info.months[1].month_price}}*11期</p>
					<p style="line-height: 45rpx;text-align: right;">￥{{datas.deposit}}</p>
					<p style="line-height: 45rpx;text-align: right;">顺丰快递|寄出包邮|归还自付</p>
					<p style="line-height: 45rpx;text-align: right;">￥4100.00</p>
				</view>
			</view>
		</view>
		<view class="demo_centerthree">
			<view class="demo_centertwo_bts" style="border-bottom: 1px solid #E9E9E9;" @click="ontans">
			<p style="line-height: 70rpx;font-size: 30rpx;">  租赁服务</p>
			<p style="position: absolute;right: 50rpx;line-height: 70rpx;font-size: 30rpx;color: #ccc;">服务详情  </p>
			<image style="width: 40rpx;height: 40rpx;position: absolute;right: 0;top: 18rpx;" src="/static/前进.png" mode=""></image>
			</view>
			
			<view class="biaoti">
				租赁服务费用用已包含在总租金内,占商品押金的5%
			</view>
			<view class="fenleis">
				<view class="fenleis_list">
					<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">随租服务</p>
					<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
				</view>
				<view class="fenleis_list">
					<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">随时可买断</p>
					<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
				</view>
				<view class="fenleis_list">
					<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">晚发必赔</p>
					<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
				</view>
			</view>
			
		</view>
		<view class="demo_centerfour">
			<view class="four_top">
				<p style="margin-left: 35rpx;margin-top: 20rpx;">商品配件</p>
			</view>
			<view class="four_btm">
				<view class="btm_one">
					<view class="one_zuo">
						<p style="font-size: 30rpx;margin-top: 10rpx;margin-left: 20rpx;">需归还</p>
						<p style="font-size: 23rpx;margin-top: 5rpx;margin-left: 20rpx;color: #9B9C9C;">快充数据线 x1</p>
						
					</view>
					<view class="one_you">
						<p style="text-align: right;margin-right: 20rpx;line-height: 80rpx;text-decoration: line-through;color: #9B9C9C;">￥150</p>
					</view>
				</view>
				<view class="btm_two">
					<p style="font-size: 30rpx;margin-top: 10rpx;margin-left: 20rpx;">{{datas.goodsPsevies.name[0]}}</p>
					<p style="font-size: 23rpx;margin-top: 5rpx;margin-left: 20rpx;color: #9B9C9C;">{{datas.goodsPsevies.name[1]}}&emsp;{{datas.goodsPsevies.name[2]}}&emsp;{{datas.goodsPsevies.name[3]}}</p>
				</view>
			</view>
		</view>
		<view class="demo_five">
			<view class="five_top">
				<view class="five_top_left">
					<p style="margin-left: 30rpx;line-height: 100rpx;">交易快照</p>
				</view>
				<view class="five_top_right">
					<p style="text-align: right;line-height: 100rpx;color: #E66E6D;margin-right: 10rpx;">发生交易争议时，可作为判断依据 ></p>
				</view>
			</view>
			<view class="five_center">
				<view class="five_center_left">
					<p style="margin-left: 30rpx;line-height: 60rpx;">租赁服务相关协议</p>
					<p style="margin-left: 30rpx;line-height: 60rpx;">订单编号</p>
					<p style="margin-left: 30rpx;line-height: 60rpx;">创建时间</p>
					<p style="margin-left: 30rpx;line-height: 60rpx;">取消订单</p>
				</view>
				<view class="five_center_right">
					<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;color: #E66E6D;">查看协议 ></p>
					<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;" @click="kaobeis(orders)">{{orders}}</p>
					<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;">2025-03-24 13:18:30</p>
					<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;">申请取消 <span style="color: #CDCECE;"> > </span> </p>
				</view>
			</view>
			
			<view class="five_btm">
				为保障资金安全，请认准手机租赁平台，切勿线下交易，平台将无法提供保障服务
			</view>
		</view>
			<view class="demo_six">
				<uni-collapse>
					<uni-collapse-item :show-animation="true" title="关于违约">
						<text>
							<p style="font-size: 5vw;color: #7B7070;">一、逾期交租/归还违约责任</p>
							<p style="font-size: 4vw; color:#B3B2B2 ;">租赁订单成立后，您需诚实履约，否则当您存在违约行为（如逾期交租、
							逾期归还）时达到《租赁服务协议》约定的用户已无归还租赁物可能性的
							情形时，商家可要求您支付赔偿，赔偿款的计算方式为：买断价-已付租
							金-已付（冻结）押金，如您在商家赔偿通知之日15天内未支付赔偿款，</p>
							
						</text>
					</uni-collapse-item>
				</uni-collapse>
				
			</view>
						<view class="demo_btms">
							
						</view>
			<view class="postion">
				<view class="postion_left">
					
				</view>
				
			</view>
			<u-popup :show="shows" :round="10" mode="bottom" @close="close" @open="open" :closeOnClickOverlay="true">
					<view class="tans">
			            <view class="tan_top">
						<p style="font-size: 40rpx;margin-top: 30rpx;font-weight: bold;">
							租赁服务
						</p>
						<p style="font-size: 30rpx;margin-top: 20rpx;">
							按时交租，平台将担保您的全程租赁服务
						</p>
			            </view>
						<view class="tan_btm">
							
						</view>
					</view>
				</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		order_info
	} from "../../../api/api.js"
import navgatsVue from "../../../common/navgatsindex/navgatsindex.vue";
	export default {
		data() {
			return {
				navigationMsg: {
					title: "取消订单",
					bgColor: "#F6F6F6"
				},
				show:true,
				orders:2025032411203258,
				shows: false,
				image:"https://api.jingkakeji.com",
				// 订单详情数据
				datas:[],
				// 手机套餐
				meal:[],
				// 租期
				info:[]
			}
		},
		onLoad(options) {
			console.log(options,"ids")
			this.onorders(options.id)
		},
		components: {
			navgatsVue
		},
		methods: {
				async onorders(id){
					let data={
						order_id:id
					}
					let res= await order_info(data)
					console.log(res,"ress")
					this.datas=res.data.data.orderInfo.products
					this.meal=res.data.data.orderInfo.meal
					this.info=res.data.data.orderInfo.info
				},
				ontans(){
					this.shows=true
				},
			kaobeis(orders){
				 uni.setClipboardData({
				  	    data: this.orders,
				     	success: function () {
				     	//调用方法成功
				         console.log('success');
				     }
				  	})
					
				// uni.showToast({
				// 	title: '复制成功',
				// 	//将值设置为 success 或者直接不用写icon这个参数
				// 	icon: 'success',
				// 	//显示持续时间为 2秒
				// 	duration: 2000
				// }) 
			},
			   open() {
			        // console.log('open');
			      },
			      close() {
			        this.shows = false
			        // console.log('close');
			      }
		}
	}
</script>

<style>
	*{
		font-size: 3vw;
		font-family: Microsoft JhengHei;
	}
.content{
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.demo_tops{
		width: 100%;
		height: 200rpx;
		/* background:linear-gradient(#fcd948, #F6F6F6); */
		/* display: flex; */
		/* position: relative; */
	}
	.demo_top_bt{
		width: 35%;
		height: 100rpx;
		margin: 0 auto;
		/* background-color: aqua; */
		display: flex;
	}
	.demo_tops_left{
		width: 50%;
		height: 100%;
	}
	.demo_tops_right{
		width: 50%;
		height: 100%;
	}
	.demo_center{
		position: absolute;
		width: 90%;
		height: 230rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		top: 150rpx;
		left: 5%;
		display: flex;
		overflow: hidden;
	}
	.center_left{
		width: 70%;
		height: 100%;
	}
	.center_right{
		width: 30%;
		height: 100%;
	}
	.demo_centertwo{
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction:column;
		overflow: hidden;
		margin-top: 5rpx;
	}
	.demo_centertwo_bt{
		width: 100%;
		height: 70rpx;
		display: flex;
	}
	.demo_centertwo_db{
		flex: 1;
		display: flex;
	}
	.de_left{
		width: 30%;
		height: 100%;
	}
	.de_right{
		width: 70%;
		height: 100%;
	}
	.psd{
		font-size: 20rpx;
		color: #ccc;
		line-height: 40rpx;
		margin-left: 10rpx;
	}
	.demo_centerthree{
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction:column;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.demo_centertwo_bts{
		width: 90%;
		height: 70rpx;
		display: flex;
		position: relative;
		margin: 0 auto;
	}
	.three_btm{
		width: 90%;
		flex: 1;
		display: flex;
		margin: 0 auto;
	}
	.btm_zuo{
		width: 30%;
		height: 100%;
	}
	.btm_you{
		width: 70%;
		height: 100%;
	}
	.biaoti{
		width: 90%;
		height: 50rpx;
		font-size: 23rpx;
		line-height: 50rpx;
		margin: 0 auto;
		color: #ccc;
	}
	.fenleis{
		width: 90%;
		flex: 1;
		margin: 0 auto;
		display: flex;
		/* background-color: aqua; */
		justify-content:center;
	}
	.fenleis_list{
		width: 33%;
		height: 100rpx;
		background-color: #F6F6F6;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: 5rpx;
		margin-right: 5rpx;
		margin-top: 20rpx;
	}
	.demo_centerfour{
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction:column;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.four_top{
		width: 100%;
		height: 80rpx;
	}
	.four_btm{
		width: 90%;
		height: 180rpx;
		margin: 0 auto;
		background-color: #F6F6F6;
		border-radius: 25rpx;
		overflow: hidden;
	}
	.btm_one{
		width: 100%;
		height: 50%;
		display: flex;
	}
	.one_zuo{
		width: 50%;
		height: 100%;
	}
	.one_you{
		width: 50%;
		height: 100%;
		
		
	}
	.btm_two{
		width: 100%;
		height: 50%;
	}
	.demo_five{
		/* position: absolute; */
		width: 90%;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction:column;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.five_top{
		width: 100%;
		height: 100rpx;
		display: flex;
	}
	
	.five_top_left{
		width: 30%;
		height: 100%;
	}
	.five_top_right{
		width: 70%;
		height: 100%;
	}
	.five_center{
		width: 100%;
		height: 250rpx;
		display: flex;
	}
	.five_center_left{
		width: 50%;
		height: 100%;
	}
	.five_center_right{
		width: 50%;
		height: 100%;
		text-align: right;
	}
	.five_btm{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		font-size: 20rpx;
		color: #E66E6D;
	}
	.demo_six{
		width: 90%;
		/* height: 400rpx; */
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		/* overflow: hidden; */
		display: flex;
		flex-direction:column;
	}
	.somlls{
		flex: 1;
	}
	
	.demo_btms{
		width: 100%;
		height: 300rpx;
	}
	.tans{
		width: 100%;
		height: 1200rpx;
		background-color: #fcd948;
		overflow: hidden;
		border-radius: 10px 10px 0 0;
		display: flex;
		flex-direction:column;
		
	}
	.tan_top{
		width: 90%;
		height: 200rpx;
		/* background-color: aliceblue; */
		margin: 0 auto;
	}
	.tan_btm{
		width: 90%;
		flex: 1;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 30px 30px 0 0;
	}
</style>
